<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>基础用法</span>
            </div>
        </template>
        <div class="mb-2 flex items-center text-sm">
            <el-checkbox-group v-model="checkbox1" class="ml-4">
            <el-checkbox label="1" size="large">Option 1</el-checkbox>
            <el-checkbox label="2" size="large">Option 2</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="my-2 flex items-center text-sm">
            <el-checkbox-group v-model="checkbox2" class="ml-4">
            <el-checkbox label="1">Option 1</el-checkbox>
            <el-checkbox label="2">Option 2</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="my-4 flex items-center text-sm">
            <el-checkbox-group v-model="checkbox3" class="ml-4">
            <el-checkbox label="1" size="small">Option 1</el-checkbox>
            <el-checkbox label="2" size="small">Option 2</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="mb-2 flex items-center text-sm">
            <el-checkbox-group v-model="checkbox3" disabled class="ml-4">
            <el-checkbox label="1" size="small">Option 1</el-checkbox>
            <el-checkbox label="2" size="small">Option 2</el-checkbox>
            </el-checkbox-group>
        </div>
    </el-card>
    <el-card class="margin-top">
        <template #header>
            <div class="card-header">
                <span>禁用状态</span>
            </div>
        </template>
        <el-checkbox v-model="checkbox" disabled label="disabled">Option A</el-checkbox>
        <el-checkbox v-model="checkbox" disabled label="selected and disabled">Option B</el-checkbox>
    </el-card>
    <el-card class="margin-top">
        <template #header>
            <div class="card-header">
                <span>单选框组</span>
            </div>
        </template>
        <el-checkbox-group v-model="checkbox11">
            <el-checkbox :label="3">Option A</el-checkbox>
            <el-checkbox :label="6">Option B</el-checkbox>
            <el-checkbox :label="9">Option C</el-checkbox>
        </el-checkbox-group>
    </el-card>
    <el-card class="margin-top">
        <template #header>
            <div class="card-header">
                <span>按钮样式</span>
            </div>
        </template>
        <div>
            <el-checkbox-group v-model="checkbox21" size="large">
            <el-checkbox-button label="New York" />
            <el-checkbox-button label="Washington" />
            <el-checkbox-button label="Los Angeles" />
            <el-checkbox-button label="Chicago" />
            </el-checkbox-group>
        </div>
        <div style="margin-top: 20px">
            <el-checkbox-group v-model="checkbox22">
            <el-checkbox-button label="New York" />
            <el-checkbox-button label="Washington" />
            <el-checkbox-button label="Los Angeles" />
            <el-checkbox-button label="Chicago" />
            </el-checkbox-group>
        </div>
        <div style="margin-top: 20px">
            <el-checkbox-group v-model="checkbox23" size="small">
            <el-checkbox-button label="New York" />
            <el-checkbox-button label="Washington" disabled />
            <el-checkbox-button label="Los Angeles" />
            <el-checkbox-button label="Chicago" />
            </el-checkbox-group>
        </div>
    </el-card>
    <el-card class="margin-top">
        <template #header>
            <div class="card-header">
                <span>按钮样式</span>
            </div>
        </template>
            <div>
                <el-checkbox-group v-model="checkbox31">
                <el-checkbox label="1" size="large" border>Option A</el-checkbox>
                <el-checkbox label="2" size="large" border>Option B</el-checkbox>
                </el-checkbox-group>
            </div>
            <div style="margin-top: 20px">
                <el-checkbox-group v-model="checkbox32">
                <el-checkbox label="1" border>Option A</el-checkbox>
                <el-checkbox label="2" border>Option B</el-checkbox>
                </el-checkbox-group>
            </div>
            <div style="margin-top: 20px">
                <el-checkbox-group v-model="checkbox33" size="small">
                <el-checkbox label="1" border>Option A</el-checkbox>
                <el-checkbox label="2" border disabled>Option B</el-checkbox>
                </el-checkbox-group>
            </div>
            <div style="margin-top: 20px">
                <el-checkbox-group v-model="checkbox34" size="small" disabled>
                <el-checkbox label="1" border>Option A</el-checkbox>
                <el-checkbox label="2" border>Option B</el-checkbox>
                </el-checkbox-group>
            </div>
    </el-card>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const checkbox = ref('selected and disabled')
const checkbox1 = ref('1')
const checkbox2 = ref('1')
const checkbox3 = ref('1')
const checkbox11 = ref(3)
const checkbox21 = ref('New York')
const checkbox22 = ref('New York')
const checkbox23 = ref('New York')

const checkbox31 = ref('1')
const checkbox32 = ref('1')
const checkbox33 = ref('1')
const checkbox34 = ref('1')
</script>
<style scoped lang="scss">
.mb-2{
    margin-bottom: 0.5rem;
}
.my, .my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
}
</style>